<template>
  <div class="order-warp">
    <div class="content">
      <div class="content-item" v-for="(item, index) in state.orderData" :key="index">
        <div class="title">{{ item.name }}</div>
        <div class="value">{{ item.value }}</div>
      </div>
    </div>
    <div class="custom-table">
      <table class="info-table">
        <thead>
          <tr>
            <th>序号</th>
            <th>工单编号</th>
            <th>工单类型</th>
            <th>状态</th>
            <th>应急抢险作业人员参与巡查处置</th>
            <th>特种车辆</th>
            <th>载入车辆</th>
            <th>排涝设备</th>
            <th>抽排能力</th>
            <th>工单描述</th>
            <th>开始时间</th>
            <th>结束时间</th>
            <th>创建人</th>
            <th>创建时间</th>
            <th>负责班组</th>
            <th>班组组长</th>
            <th>组长联系电话</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in tableData" :key="index">
            <td>{{ index + 1 }}</td>
            <td>{{ item.fxdwmc }}</td>
            <td>{{ item.fxdwbh }}</td>
            <td>{{ item.ssjd }}</td>
            <td>{{ item.dwlx }}</td>
            <td>{{ item.ssyw }}</td>
            <td>{{ item.dz }}</td>
            <td>{{ item.glhl }}</td>
            <td>{{ item.zrdw }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
const tableData = ref([
  {
    fxdwmc: "新桥街道石梯沟支路新",
    fxdwbh: "50010600106004000405",
    dwlx: "下穿道",
  },
  {
    fxdwmc: "新桥街道石梯沟支路新",
    fxdwbh: "50010600106004000405",
    dwlx: "下穿道",
  },
]);
const state = reactive({
  orderData: [
    { name: "应急抢险作业人员参与巡查处置", value: 100 },
    { name: "特种车辆", value: 100 },
    { name: "载人车辆", value: 100 },
    { name: "排涝设备", value: 100 },
    { name: "抽排能力", value: 100 },
  ],
});
</script>

<style lang="less" scoped>
.order-warp {
  .content {
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 10px 10px;
    text-align: center;
    .content-item {
      padding: 10px;
      font-size: 14px;
      color: #6fc2ff;
      background: #fff;
      &:last-child {
        grid-column: 1 / -1; // 从第一列开始，跨越到最后一列
      }
    }
    .title {
      color: #3d3d3d;
    }
    .value {
      margin-top: 10px;
    }
  }

  .custom-table {
    margin-top: 10px;
    width: 100%;
    overflow: auto;
    .info-table {
      // width: 100%;
      border-collapse: collapse;
      th,
      td {
        border: 1px solid #797979;
        padding: 8px;
        text-align: center;
        background: #fff;
        max-width: 180px; /* 设置单元格的最大宽度 */
        white-space: nowrap; /* 防止文本换行 */
        overflow: hidden; /* 隐藏超出部分 */
        text-overflow: ellipsis; /* 超出部分显示省略号 */
      }

      th {
        // background: #f5f5f5;
        font-weight: normal;
        color: #000;
        background: #e6e6e6;
      }

      td {
        color: #000;
      }
    }
  }
}
</style>
